<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Dreadful Fire</title>
		
		<link type="text/css" rel="stylesheet" href="static/css/style.css">
		<link type="text/css" rel="stylesheet" href="static/thickbox/thickbox.css">
		
		<script type="application/javascript" src="static/jquery-1.2.6.min.js"></script>
		<script type="application/javascript" src="static/jquery.blockUI.js"></script>
		<script type="application/javascript" src="static/thickbox/thickbox-compressed.js"></script>
		
		
		<script type="application/javascript" src="static/config.js"></script>
		<script type="application/javascript" src="static/misc.js"></script>
		<script type="application/javascript" src="static/chooser.js"></script>
		<script type="application/javascript" src="static/flickr.query.js"></script>
		<script type="application/javascript" src="static/main.js"></script>

	</head>
	<body>
		<center>
			<!-- title -->
			<h3>Dreadful Fire</h3>
			
			<div style="width:400px;padding-top:20px;">
				<label style="font-weight:bold;">Type something here</label> <input type="text" id="tagsInput" style="" />
				<br />
				<label id="foundPhotos" style="font-size:0.6em">e.g.: town, New York, coffee...</label>
			</div>
			
			<div style="width:400px;padding-top:20px;padding-bottom:20px;" >
				<div style="float:left;">
					Completed: <label id="percent"></label> %
				</div>
				
				<div style="float:right;"> 
					<div id="live1" class="liveHeart" ></div>
					<div id="live2" class="liveHeart" ></div>
					<div id="live3" class="liveHeart" ></div>
				</div>
				&nbsp;
			</div>

			<!-- The Canvas -->
			<div id="canvasDiv" style="background-color:red; width:400px; height:300px; border:1px solid black;">
				<canvas id="screen" width="400" height="300" >
					<img src="fondo1.JPG" width="400" height="300" id="backgroundImage">
				</canvas>
			</div>
			
			<div style="width:400px;padding-top:20px;">
				<div style="float:left;">
					<label id="stage"></label>
				</div>
				
				<div style="float:right">
					<div class="redBar" id="redBar"></div>
					<div class="greenBar" id="greenBar"></div>
				</div>
				&nbsp;
			</div>

			<br />

			<div style="padding-top:0px;font-size:0.8em;">
				<b>Control:</b>
				Move the yellow squared face with mouse or arrow keys.  
			</div>
				
			<!-- Flickr -->
			<div style="font-size:0.5em;padding-top:20px;">
				This product uses the APIs and services of other websites but is not endorsed or certified by any of those websites.<br />
				Flickr is a registered trademark of Yahoo, Inc.
				Some art has been taken from <a href="http://art.gnome.org/">Gnome 2 Icon Theme</a> 
				under <a href="http://creativecommons.org/licenses/GPL/2.0/">GNU GPL</a> license.
			</div>
			
			<a href="#" id="thickboxLauncher" class="thickbox" ></a>
			
			<div id="divWindow" style="display:none;">
				<div>
					<img id="imgWindow" src="#"/>
				</div>
			</div>
			
		</center>
	</body>
</html>
